﻿<template>
  <v-stepper v-model="step">
    <v-stepper-header>
      <v-stepper-step :complete="step > 1" step="1">歌曲信息</v-stepper-step>
      <v-divider/>
      <v-stepper-step :complete="step > 2" step="2">添加歌词</v-stepper-step>
      <v-divider/>
      <v-stepper-step :complete="step > 3" step="3">完成</v-stepper-step>
    </v-stepper-header>
    <v-stepper-items>
      <!--1、基本信息-->
      <v-stepper-content step="1">
        <v-flex class="xs12 mx-auto">
          <v-form v-model="valid" ref="childsongForm">
            <v-text-field label="歌曲名称" v-model="songform.name" :counter="200" required :rules="[v => !!v || '歌曲名称不能为空']" hide-details/>
            <v-layout row>
              <v-flex xs5>
                <!--歌曲分类-----------------------------要写------------------------->
                <v-cascader
                        url="/category/of/parent"
                        multiple
                        required
                        v-model="songform.categories"
                        label="歌曲分类"/>
              </v-flex>
              <v-spacer/>
              <v-flex xs5>
                <!--选择歌手-----------------------------要写------------------------->
                <v-select
                        v-model="songform.singer"
                        :items="singers"
                        item-text="name"
                        item-value="id"
                        label="选择歌手"
                        persistent-hint
                        return-object
                        single-line
                ></v-select>
              </v-flex>
            </v-layout>
            <v-layout row>
              <v-flex class="xs6">
                <div align="center" >
                  <v-label>上传歌曲封面</v-label>
                  <v-upload v-model="songform.picture" :isAudio="false" :pic-width="320" :pic-height="180"
                            needSignature url="/signature?type=image"/>
                </div>
              </v-flex>
              <v-flex class="xs6 mx-auto">
            <div align="center" style="margin-left: 30px">
              <v-label>上传歌曲文件</v-label>
                <v-upload
                        v-model="songform.songUrl"
                        :isAudio="true"
                        :pic-width="320"
                        :pic-height="180"
                        :name="songform.name"
                        needSignature
                        url="/signature?type=song"
                        @getDuration="getDuration"
                />
            </div>
            </v-flex>
            </v-layout>
          </v-form>
        </v-flex>
      </v-stepper-content>
      <!--2、歌词-->
      <v-stepper-content step="2">
        <el-input
                type="textarea"
                style=""
                placeholder="请复制如下的歌词形式：
          [00:00.00] 作曲 : 周振霆/代岳东
          [00:01.00] 作词 : 唐湘智
          [00:19.410]他留给你是背影
          [00:25.060]关于爱情只字不提
          [00:29.850]害你哭红了眼睛
          [00:34.780]他把谎言说的竟然那么动听"
                v-model="songform.lyric"
                show-word-limit
                size="medium"
                :autosize="{ minRows: 15, maxRows: 15}"
        >
        </el-input>
      </v-stepper-content>
    </v-stepper-items>
  </v-stepper>
</template>

<script>
export default {
  /*
  * 1. 给表单的属性判空
  * */
  name: "songs-form",
  props: {
    isEdit: {
      type: Boolean,
      default: false
    },
    step: {
      type: Number,
      default: 1
    },
    oldSong: {
      type: Object,
    }
  },
  data() {
    return {
      // songform: this.song,
      singers: [],
      valid: false,
      songform: {},
    }
  },
  methods: {
    //从上传组件中获取音频时长的方法
    getDuration(val) {
      this.songform.audioDuration = val
    }
  },
  watch: {
    //song是songs页面的，songform是form页面的
    //1.先点击新增，isEdit为false,打开表单，songform是空的，song也是空
    //2.改变表单的值，触发watch函数songform的值传到songs页面去赋值
    //3.再次点击新增，song的值未清空，songform也没清空
    songform: {
      deep : true,
      handler(){
        this.$emit("changeSong",this.songform)
      }
    },
    "songform.categories": {
      deep:true,
      handler(){
        this.$emit("changeSong",this.songform)
      }
    },
    "songform.singer": {
      deep:true,
      handler(){
        this.$emit("changeSong",this.songform)
      }
    }

  },
  created() {
    //加载歌手的信息
    this.$http.get("/singer/all").then(resp=>{
      this.singers = resp.data
      console.log("this.singers")
      console.log(this.singers)

    })
  }
};
</script>


<style scoped>
</style>
